<!-- 右击菜单 -->
<template>
  <div
    v-show="showRightMenu"
    class="menu-style"
    :style="position">
    <div>
      <li v-if="isMulti === 2" @click="roomsMerging">
        <block-outlined />
        &nbsp;&nbsp;&nbsp;房间合并
      </li>
      <li v-if="isMulti === 2 " @click="fillMerging">
        <gateway-outlined />
        &nbsp;&nbsp;&nbsp;补面合并
      </li>
      <li v-if="isMulti === 1" @click="roomSplit">
        <insert-row-right-outlined />
        &nbsp;&nbsp;&nbsp;&nbsp;房间分割
      </li>
      <li v-if="isMulti === 3" @click="wallSplit">
        <insert-row-right-outlined />
        &nbsp;&nbsp;&nbsp;&nbsp;墙体分割
      </li>
      <li v-if="isMulti === 1 || isMulti === 3 " @click="featureScale">
        <expand-alt-outlined />
        &nbsp;&nbsp;&nbsp;&nbsp;图形缩放
      </li>
      <li v-if="isMulti === 1 || isMulti === 3 " @click="featureRotate">
        <reload-outlined />
        &nbsp;&nbsp;&nbsp;&nbsp;图形旋转
      </li>
      <li v-if="isMulti === 1 || isMulti === 3 " @click="viewProperties">
        <file-search-outlined />
        &nbsp;&nbsp;&nbsp;&nbsp;查看属性
      </li>
      <li @click="delectSelectFeatures">
        <delete-outlined />
        &nbsp;&nbsp;&nbsp;&nbsp;删除
      </li>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import {
  BlockOutlined,
  DeleteOutlined,
  GatewayOutlined,
  InsertRowRightOutlined,
  FileSearchOutlined,
  ExpandAltOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'

export default {
  components: {
    BlockOutlined,
    DeleteOutlined,
    GatewayOutlined,
    FileSearchOutlined,
    InsertRowRightOutlined,
    ExpandAltOutlined,
    ReloadOutlined
  },
  setup(proper, {emit}) {
    const state = reactive({
      showRightMenu: false,
      position: {
        top: '100px',
        left: '100px'
      },
      isMulti: 1 // 1表示面单选， 2表示面多选， 3表示线单选， 4表示线多选
    })

    onMounted(() => {
    })
    // 设置菜单位置
    function setPosition(po) {
      state.position.top = po.top
      state.position.left = po.left
    }
    // 显示菜单
    function show(isMulti) {
      state.showRightMenu = true
      state.isMulti = isMulti
    }
    // 隐藏菜单
    function hide() {
      state.showRightMenu = false
    }
    // 房间合并
    function roomsMerging() {
      hide()
      emit('roomsMerging')
    }
    // 补面合并
    function fillMerging() {
      hide()
      emit('fillMerging')
    }
    // 删除要素
    function delectSelectFeatures() {
      hide()
      emit('delectSelectFeatures')
    }
    // 房间分割
    function roomSplit() {
      hide()
      emit('roomSplit')
    }
    // 墙体分割
    function wallSplit() {
      hide()
      emit('wallSplit')
    }
    // 查看属性
    function viewProperties() {
      hide()
      emit('viewProperties')
    }
    // 图形缩放
    function featureScale() {
      hide()
      emit('featureScale')
    }
    // 图形旋转
    function featureRotate() {
      hide()
      emit('featureRotate')
    }

    return {
      ...toRefs(state),
      setPosition,
      show,
      hide,
      roomsMerging,
      fillMerging,
      delectSelectFeatures,
      roomSplit,
      wallSplit,
      viewProperties,
      featureScale,
      featureRotate
    }
  }
}

</script>

<style lang='scss' scoped>
.menu-style{
  position: fixed;
  min-width: 140px;
  list-style: none;
  border: 1px solid #e4e7ed;
  border-bottom: 0;
  background: #fff;
  text-align: left;
  z-index: 99;
  box-shadow: rgb(0 0 0 / 30%) 0px 0px 2px, rgb(0 0 0 / 30%) 0px 4px 8px;
  li{
    line-height: 34px;
    font-size: 14px;
    color: #333;
    line-height: 30px;
    text-align: left;
    cursor: pointer;
    padding: 0 50px 0 20px;
    transition: all 0.3s;
  }
  li:hover{
    background-color: #dedede;
    color: #0089ff;
  }
}

</style>
